<span id="listPeriod" >
	<select class="searchList" name="{$id}">
		<option value="">Select {$caption}</option>
		{foreach from=$list_values item=list_value}
			<option value='{$list_value.id}' {if $list_value.id == $value}selected="selected"{/if} >{$list_value.caption}</option>
		{/foreach}
	</select>
</span>

<script>
{literal}
	function changePeriod(paymentType)
	{
		if (paymentType == 1) {
			{/literal}
				var html = '<select class="searchList" name="{$id}" onChange="changePeriodName(this.value)"><option value="">Select {$caption}</option>{foreach from=$list_values item=list_value}{if $list_value.id != "unlimited"}<option value="{$list_value.id}" {if $list_value.id == $value}selected="selected"{/if} >{$list_value.caption}</option>{/if}{/foreach}</select>';
			{literal}
		}
		else {
			{/literal}
				var html = '<select class="searchList" name="{$id}" onChange="changePeriodName(this.value)"><option value="">Select {$caption}</option>{foreach from=$list_values item=list_value}<option value="{$list_value.id}" {if $list_value.id == $value}selected="selected"{/if} >{$list_value.caption}</option>{/foreach}</select>';
			{literal}
		}
		
		$('#listPeriod').html(html);
	}

	function changePeriodName(val)
	{
		if (val == 'unlimited') {
			$('input[name=period]').val('');
			$('input[name=period]').attr('disabled', 'disabled');
		}
		else 
			$('input[name=period]').attr('disabled', false);
	}
{/literal}
</script>